<!--角色管理-->
<template>
  <div>
    <Form :model="searchObj" inline="false">
      <FormItem>
        <Input v-model="searchObj.roleName" placeholder="角色名称" />
      </FormItem>
      <FormItem>
        <Input v-model="searchObj.creator" placeholder="创建人" />
      </FormItem>
      <FormItem>
        <Input v-model="searchObj.editor" placeholder="修改人" />
      </FormItem>

      <FormItem>
        <Select v-model="searchObj.status" placeholder="是否禁用">
          <Option value="0">禁用</Option>
          <Option value="1">未禁用</Option>
        </Select>
      </FormItem>

      <FormItem>
        <i-button type="primary" shape="circle" icon="ios-search" @click="serach">搜索</i-button>
      </FormItem>

      <FormItem>
        <i-button type="primary" shape="circle" icon="ios-search" @click="resetSearch">重置</i-button>
      </FormItem>

      <FormItem>
        <i-button
          type="primary"
          shape="circle"
          @click="addRole('add')"
          v-has="role/saveOrUpdate"
        >新增角色</i-button>
      </FormItem>
    </Form>

    <i-table :columns="columns1" :data="data1"></i-table>
    <Page
      :total="pageData.total"
      :current="pageData.current"
      :page-size="pageData.size"
      show-elevator
      show-total
      @on-change="changePage"
    ></Page>

    <!--角色绑定菜单菜单页面-->
    <Modal v-model="menuDig" title="权限管理" @on-ok="ok" @on-cancel="cancel">
      <Tree :data="data2" ref="tree" show-checkbox></Tree>
    </Modal>

    <!--新增/修改角色页面-->
    <Modal v-model="operDig" :title="operTitle" @on-ok="ok" @on-cancel="cancel">
      <Form :model="roleObj" :label-width="80" ref="formCustom" :rules="ruleForm">
        <FormItem label="角色名称" prop="roleName">
          <Input v-model="roleObj.roleName" placeholder="角色名称,不能和已有角色重名..." />
        </FormItem>
        <FormItem label="角色描述">
          <Input v-model="roleObj.summary" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submitRole" v-has="role/saveOrUpdate">提交</Button>
        </FormItem>
      </Form>
    </Modal>

    <!--设置角色按钮权限页面-->
    <Modal v-model="setButtonDig" title="设置角色按钮权限" @on-ok="ok" @on-cancel="cancel" width="800px">
      <Form :model="roleObj" :label-width="80" ref="formCustom" :rules="ruleForm">
        <FormItem label="角色名称" prop="roleName">
          <Input v-model="roleObj.roleName" disabled placeholder="角色名称,不能和已有角色重名..." />
        </FormItem>
        <FormItem label="角色描述">
          <Input v-model="roleObj.summary" disabled />
        </FormItem>

        <FormItem label="菜单">
          <Row>
            <Col span="12">
              <Tree :data="data2" @on-select-change="selectMenu" show-checkbox disabled></Tree>
            </Col>
            <Col span="12">
              <CheckboxGroup v-model="buttonArr">
                <Checkbox
                  :label="item.id"
                  v-for="item in buttonListData"
                  :key="item.id"
                >{{item.url}}</Checkbox>
              </CheckboxGroup>
            </Col>
          </Row>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="submitButton">提交</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { rolePage, roleMenu, bindMenu, saveOrUpdate } from "@/api/roleApi";
import { allMenuIvTree } from "@/api/menuAPi";
import { dealPageData } from "@/utils/myPageUtil";
import { formatDate } from "@/utils/dateUtil";
import { buttonList, setButton } from "@/api/buttonPermissionApi";

import { Button } from "iview";

export default {
  name: "roleAdmin",
  //用于刷新页面
  inject: ["reload"],
  data() {
    return {
      searchObj: {
        roleName: "",
        creator: "",
        editor: ""
      },
      menuTitle: "测试",
      buttonArr: [],
      operDig: false, //新增/修改
      setButtonDig: false, //设置角色按钮
      operTitle: "新增角色", //标题默认值
      menuTree: [], //传送给后端的数组
      roleId: 0, //角色id
      buttonListData: "",
      roleObj: {
        roleName: "",
        summary: "",
        id: 0
      },
      /*表单校验*/
      ruleForm: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" }
        ]
      },
      //菜单权限页面,树形控件数据
      data2: [],
      menuDig: false, //角色绑定菜单页面
      data1: [],
      pageData: {
        total: 0,
        current: 1,
        size: 10,
        data: []
      },
      columns1: [
        {
          title: "角色名称",
          key: "roleName"
        },
        {
          title: "角色描述",
          key: "summary"
        },
        {
          title: "是否启用",
          key: "status",
          render: (h, params) => {
            if (params.row.status == 1) {
              return h("span", "未禁用");
            } else {
              return h("span", "禁用中");
            }
          }
        },
        {
          title: "创建人",
          key: "createName"
        },
        {
          title: "修改人",
          key: "editorName"
        },
        {
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "修改时间",
          key: "updateTime"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              //渲染一个div标签
              h(
                Button, //在div标签下渲染一个iview组件
                {
                  props: {
                    //传递参数
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    //设置样式
                    marginRight: "5px"
                  },
                  on: {
                    //监听$emit事件
                    click: () => {
                      this.openMenuDig(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "role/bindMenu"
                    }
                  ]
                },
                "绑定菜单"
              ),
              h(
                Button, //在div标签下渲染一个iview组件
                {
                  props: {
                    //传递参数
                    type: "error",
                    size: "small"
                  },
                  style: {
                    //设置样式
                    marginRight: "5px"
                  },
                  on: {
                    //监听$emit事件
                    click: () => {
                      this.openMenuDig(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "role/saveOrUpdate"
                    }
                  ]
                },
                "编辑角色"
              ),
              h(
                Button, //在div标签下渲染一个iview组件
                {
                  props: {
                    //传递参数
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    //设置样式
                    marginRight: "5px"
                  },
                  on: {
                    //监听$emit事件
                    click: () => {
                      this.setButtonPermission(params.row);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "buttonPermission/setButton"
                    }
                  ]
                },
                "设置按钮权限"
              )
              /* h(   //todo
                Button,
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              ) */
            ]);
          }
        }
      ]
    };
  },
  methods: {
    openMenuDig(roleId) {
      this.roleId = roleId;
      //查询该角色下所有的菜单
      allMenuIvTree(roleId).then(res => {
        if (res.data.code == 200) {
          this.data2 = res.data.data;
          this.menuDig = true;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    editRole(roleId) {
      this.operTitle = "编辑角色";
      this.operDig = true;
      this.roleObj.id = roleId;
    },
    ok() {
      //获取被勾选的节点,这里包括了父级菜单,全部传给后端进行构建
      let checkedNodes = this.$refs.tree.getCheckedNodes();
      checkedNodes.forEach((item, index, arr) => {
        let obj = { id: 0, text: "" };
        obj.id = item.id;
        obj.text = item.title;
        this.menuTree.push(obj);
      });
      //角色和权限进行绑定
      bindMenu(this.menuTree, this.roleId).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("绑定成功");
          //关闭绑定页面,刷新主页面
          this.menuDig = false;
          this.reload();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    cancel() {
      this.$Message.info("点击了取消");
    },
    remove(index) {
      this.data1.splice(index, 1);
    },
    changePage(index) {

      this.searchObj.size = this.pageData.size;
      this.searchObj.current = index;
      //初始化分页
      rolePage(this.searchObj).then(res => {
        if (res.data.code == 200) {
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    addRole(value) {
      if ("add" == value) {
        //清空数据
        this.roleObj = {};
        this.operTitle = "新增角色";
        this.operDig = true;
        this.$Message.info("新增角色");
      } else {
        this.$Message.info("修改角色");
      }
    },
    submitRole() {
      this.$refs.formCustom.validate(valid => {
        if (valid) {
          //新增/修改角色
          saveOrUpdate(this.roleObj).then(res => {
            if (res.data.code == 200) {
              if (this.operTitle == "add") {
                this.$Message.info("新增角色成功");
              } else {
                this.$Message.info("修改角色成功");
              }
              //关闭对话页面,刷新主页面
              this.operDig = false;
              this.reload();
            }
          });
        }
      });
    },
    setButtonPermission(row) {
      this.buttonArr = [];
      this.buttonListData = [];
      //给角色绑定按钮权限
      this.roleObj = row;
      this.roleId = row.id;
      //查询该角色下所有的菜单
      allMenuIvTree(this.roleId).then(res => {
        if (res.data.code == 200) {
          this.data2 = res.data.data;
        } else {
          this.$Message.error(res.data.msg);
        }
      });

      //根据角色id,查询对应的按钮权限,回显数据(给选择框打勾)
      let obj = {
        roleId: row.id
      };
      buttonList(obj).then(res => {
        if (res.data.code == 200) {
          res.data.data.forEach(item => {
            this.buttonArr.push(item.id + "");
          });
        }
      });
      this.setButtonDig = true;
    },
    selectMenu(value, data) {
      let obj = {
        menuId: data.id
      };
      buttonList(obj).then(res => {
        if (res.data.code == 200) {
          this.buttonListData = res.data.data;
        }
      });
    },
    submitButton() {
      //提交绑定数据
      let obj = {
        roleId: this.roleId,
        idList: this.buttonArr
      };
      setButton(obj).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("按钮权限设置成功");
          this.setButtonDig = false;
          this.reload();
        }
      });
    },
    serach() {
      this.searchObj.current = 1;
      this.searchObj.size = this.pageData.size;
      rolePage(this.searchObj).then(res => {
        if (res.data.code == 200) {
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        }
      });
    },
    resetSearch() {
      this.searchObj = {};
    }
  },
  created() {
    //初始化分页
    rolePage({
      size: this.pageData.size,
      current: this.pageData.current,
      userId: "596078038307966976"
    }).then(res => {
      if (res.data.code == 200) {
        //处理分页
        this.pageData = dealPageData(res.data);
        this.data1 = this.pageData.data;
      } else {
        this.$Message.error(res.data.msg);
      }
    });
  }
};
</script>

<style scoped>
</style>
